<template>
    <el-container>
    <el-header>
<div>
    <div class="rule_container">
        <div class="header">
            <p>读者规则信息查看</p>
        </div>
    </div>
</div>
    </el-header>
<!--标签页-->
        <el-main>
    <el-tabs v-model="activeName" @tab-click="handleClick">
<!--        第一个标签页-->
        <el-tab-pane label="借书册数与期限" name="first">
            <div class="words-intro noteContent">
                    <p element-id="init"><br></p>
                    <p class="MsoNormal" element-id="6xgiycph" style="text-align: center;">
                        <span style="font-family: 微软雅黑, 'Microsoft YaHei'; font-size: 20px">不同读者借书册数与期限</span>
                    </p>
                    <div class="table"><table class="MsoNormalTable" width="744" style="margin: 0px auto;">
                    <colgroup><col width="144"><col width="152"><col width="171"><col width="143">
                        <col width="134"></colgroup><tbody><tr class="firstRow">
                    <td valign="middle" style="border-color: windowtext">
                        <p class="MsoHeader" element-id="1l3y5tdp" style="text-align: center">
                            <span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">
                                <span style="color: rgb(0, 0, 0)">读者类型</span>
                            </span></p></td>
                    <td valign="middle" style="border-top-color: windowtext;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none">
                        <p class="MsoNormal" element-id="3x719emr" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">借书总册数</span></span></p></td><td valign="middle" style="border-top-color: windowtext;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none">
                    <p class="MsoHeader" element-id="02ze87ld"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">
                    <span style="color: rgb(0, 0, 0)">一般图书借期（天）</span></span>
                </p></td><td valign="middle" style="border-top-color: windowtext;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="pu8vcbzf" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">
                    <span style="color: rgb(0, 0, 0)">允许预约册数</span></span>
                </p></td><td valign="middle" style="border-top-color: windowtext;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="gyl89qe2" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">
                    <span style="color: rgb(0, 0, 0)">允许续借次数</span></span>
                </p></td></tr><tr><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left-color: windowtext"><p class="MsoNormal" element-id="4bgudkqz" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">教职工、研究生</span></p>
                </td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="4ygu7to3" style="text-indent: 24px;text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">60</span></span></p>
                </td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="qv94yw2z" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">60</span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="magxkhc0" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">
                    <span style="color: rgb(0, 0, 0)">1</span></span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="rp7v02n5" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">1</span></span></p></td></tr><tr><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left-color: windowtext">
                    <p class="MsoNormal" element-id="kqoh32ys" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">本科生</span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="6uei92tg" style="text-indent: 24px;text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">60</span></span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="ebnwrvd8" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">60</span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="kqxc3i24" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">1</span></span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="21chtzkd" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">1</span></span></p></td></tr><tr><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left-color: windowtext"><p class="MsoNormal" element-id="i6cs7jbz" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">其他</span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="xt0d7z8p" style="text-indent: 24px;text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">10</span></span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="tlhq4nu1" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'">10</span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="pulj92cz" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">1</span></span></p></td><td valign="middle" style="border-top: none;border-right-color: windowtext;border-bottom-color: windowtext;border-left: none"><p class="MsoNormal" element-id="7ah4xqu2" style="text-align: center"><span style="font-size: 16px;font-family: 微软雅黑, 'Microsoft YaHei'"><span style="color: rgb(0, 0, 0)">1</span></span></p></td></tr></tbody></table></div>
                    <p element-id="65b97lu4"><br></p></div>
        </el-tab-pane>
<!--        第二个标签页-->
        <el-tab-pane label="图书损坏处罚规定" name="second">
            <div id="detail-vue" class="more-list-style1 richtext">
                <div class="basic-box">
                    <div class="words-intro noteContent">
                <div element-id="ydpzo8jf">
                <p element-id="7tj8hc1r" style="font-family: 微软雅黑; border-width: 0px; color: rgb(66, 65, 65); text-indent: 0px;">​<br></p>
                <p element-id="yjwpfvs2" style="font-family: 微软雅黑; border-width: 0px; color: rgb(66, 65, 65); text-indent: 0px;"><br></p>
                <p element-id="83lufrxg" style="text-indent: 28px;"><span style="font-size: 16px;">读者在图书上涂抹或勾点、污损图书严重者，必须赔偿原书，并缴纳新书加工费5.00元，无法赔偿原书则按遗失图书条款处理。</span></p>
                <p element-id="470x35r1" style="text-indent: 28px;"><span style="font-size: 16px;">撕毁图书，视情节轻重进行赔偿，并停止借阅权1～3个月。损坏严重者，必须赔偿原书。无法赔偿原书按遗失图书规定处理，并通报所在单位。情节严重者报学校从严处理。</span></p>
                <p element-id="v7q4xh6p" style="font-family: 微软雅黑; border-width: 0px; color: rgb(66, 65, 65); text-indent: 0px;"><br></p>
                </div>
                <p element-id="yosd0lj6"><br></p>
                    </div>
                    <div class="cut-line"></div>
                </div>
            </div>
        </el-tab-pane>
<!--        第三个标签页-->
        <el-tab-pane label="图书逾期扣费规定" name="third">
            <div id="detail-vue" class="more-list-style1 richtext">
                <div class="basic-box">
                    <div class="words-intro noteContent">
                    <div element-id="xak3iv9w">
                        <p element-id="wn5o1l6c" style="font-family: 微软雅黑; border-width: 0px; color: rgb(66, 65, 65); text-indent: 0px;"><br></p>
                        <p element-id="r8b0evzh" style="font-family: 微软雅黑; border-width: 0px; color: rgb(66, 65, 65); text-indent: 0px;"><br></p>
                        <p style="font-family: 微软雅黑; border-width: 0px; font-size: 15px; color: rgb(66, 65, 65); text-indent: 32px;" element-id="bxvnjoc2"><span style="border-width: 0px; color: black; font-size: 16px;">为提高图书馆藏书利用率，满足广大读者的借阅需求，培养借还书的诚信意识，请大家按照系统借期及时归还所借图书。若有逾期，我们将会通过系统催还（邮件）及其他方式及时催还逾期图书。</span></p>
                        <p style="font-family: 微软雅黑; border-width: 0px; font-size: 15px; color: rgb(66, 65, 65); text-indent: 32px;" element-id="hv61nk47"><span style="border-width: 0px; color: black; font-size: 16px;">读者遗失图书需在应归还日期之前办理赔偿手续，赔偿新的原版本（出版社、版本相同，印次可不同）或新版本（同一出版社的修订版）图书。如无法赔偿原书则视所遗失图书的情况，分别按下列规定进行赔款：</span></p>
                        <p style="font-family: 微软雅黑; border-width: 0px; font-size: 15px; color: rgb(66, 65, 65); text-indent: 32px;" element-id="mxtp3igk"><span style="border-width: 0px; color: black; font-size: 16px;">（1）一般中外文图书按不同的出版年，赔款倍率如下：1990年以前（含1990年）出版的图书，按原书价的10倍赔款；1991-2000年出版的图书，按原书价的8倍赔款；2001-2010年出版的图书，按原书价的5倍赔款；2011年后（含2011年）出版的图书，按原书价的3倍赔款。</span></p>
                        <p style="font-family: 微软雅黑; border-width: 0px; font-size: 15px; color: rgb(66, 65, 65); text-indent: 32px;" element-id="z4tikujg"><span style="border-width: 0px; color: black; font-size: 16px;">（2）善本、孤本图书按重新估价后价格的10倍赔偿。</span></p>
                        <p style="font-family: 微软雅黑; border-width: 0px; font-size: 15px; color: rgb(66, 65, 65); text-indent: 32px;" element-id="5pq483jb"><span style="border-width: 0px; color: black; font-size: 16px;">（3）遗失系列图书中的一册，单本计价者按单本计算，整套计价者按整套折价计算，再按上述规定赔款。</span></p>
                        <p style="font-family: 微软雅黑; border-width: 0px; font-size: 15px; color: rgb(66, 65, 65); text-indent: 32px;" element-id="9d3blc1r"><span style="border-width: 0px; color: black; font-size: 16px;">（4）已赔偿的图书，在一个月内失而复得，可交回原书与赔款单据，办理退书、退款手续，一个月后概不办理。</span></p>
                        <p style="font-family: 微软雅黑; border-width: 0px; font-size: 15px; color: rgb(66, 65, 65); text-indent: 32px;" element-id="yl80wguz"><span style="border-width: 0px; color: black; font-size: 16px;">（5）无论赔原书还是新版书，均需到流通借阅部进行版本认定，并缴纳新书加工费5.00元。</span></p><p element-id="2fqdpexj" style="font-family: 微软雅黑; border-width: 0px; color: rgb(66, 65, 65); text-indent: 0px;"><br></p></div>
                <p element-id="9sxb1zgl"><br></p>
                </div>
                    <div class="cut-line"></div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
        </el-main>
    </el-container>
</template>

<script>
export default {
    name: "rules",
    data() {
        return {
            activeName: 'first'
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
}
</script>

<style scoped>
.rule_container {
    position: relative;
}
.header {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    p {
        font-size: 36px;
        color: rgb(70, 130, 180);
    }
}
.banner {
    display: flex;
    flex-direction: column;
    position:absolute;
    left:50%;
    transform: translate(-50%);

}
.el-tooltip{
    width: 500px;
    font-size: 16px;
    color:white;
}
.el-tooltip:hover{
    color:black;
}
.el-tooltip:nth-child(1){
    margin-top:100px;
}
.el-tooltip:nth-child(n+2){
    margin-top:50px;
    margin-left:0px;
}
.el-tooltip:nth-child(odd){
    background-color: pink;
}
.el-tooltip:nth-child(even){
    background-color: rgb(49, 176, 213)
}
.content_tip {
    font-size: 16px;
}

</style>
